<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:c="http://xmlns.jcp.org/jsp/jstl/core"
	xmlns:mywidgets="http://xmlns.jcp.org/jsf/composite/widgets"
	xmlns:fn="http://xmlns.jcp.org/jsp/jstl/functions"
	xmlns:pt="http://xmlns.jcp.org/jsf/passthrough">

<ui:composition template="/templates/overviewTemplate.xhtml">
	<!-- <ui:composition template="/templates/contentTemplate.xhtml"> -->

	<ui:define name="title">Album Administration</ui:define>

	<ui:define name="body">

		<h1>Album Administration</h1>

		<script>
		$(function() {
			$(document).tooltip({
				track: true
			});

			$('form:first *:input[type!=hidden]:first').focus();
		});
		</script>


		<h:form id="listOfAlbumUnitsForm">
			<h:inputText autocomplete="true" style="width: 300px"
				value="#{albumController.searchFilter}" pt:placeholder="Album title"
				pt:autofocus="true" title="Search by album name">
				<f:ajax event="keyup" execute="@this"
					render=":albumListForm:albumTable" />
			</h:inputText>
		</h:form>

		<p class="betweenSections" />

		<h:form id="albumListForm">

			<h:dataTable id="albumTable" value="#{albumController.listOfAlbums}"
				var="album" styleClass="data-table" headerClass="table-header"
				rowClasses="table-odd-row,table-even-row">

				<h:column>
					<!-- column header -->
					<f:facet name="header">Action</f:facet>
					<!-- row record -->
					<h:commandButton value="edit" styleClass="mini"
						action="#{albumController.loadDetail(album)}">
						<f:ajax render=":detailGroup :detailForm :pictureGroup" />
					</h:commandButton>

					<h:commandButton value="delete" styleClass="mini"
						action="#{albumController.delete(album)}">
						<f:ajax render="@form" />
					</h:commandButton>
				</h:column>

				<h:column sortBy="#{album.name}">
					<f:facet name="header">Album</f:facet>
					<h:outputText value="#{album.name}" styleClass="textToken" />
				</h:column>

				<h:column>
					<f:facet name="header">Description</f:facet>
					<h:outputText value="#{album.description}" styleClass="textToken" />
				</h:column>

				<h:column>
					<!-- column header -->
					<f:facet name="header"># of Pictures</f:facet>
					<!-- row record -->

				</h:column>
			</h:dataTable>
		</h:form>

		<h2>Album</h2>

		<h:panelGroup id="detailGroup">
			<h:form id="detailForm">
				<h:inputHidden id="id" value="#{albumController.id}" />
				<table>
					<tr>
						<td><label for="name">Album name</label> <h:inputText
								id="name" value="#{albumController.name}" required="true"
								requiredMessage="Please insert a Album name"
								pt:placeholder="Enter a Album name.">

							</h:inputText> <h:message id="name_msg" for="name" /></td>
						<td><label for="description">Album Description</label> <h:inputTextarea
								id="description" value="#{albumController.description}"
								required="true"
								requiredMessage="Please insert an album description." cols="50"
								rows="4" pt:placeholder="Enter an album description." /> <h:message
								id="description_msg" for="description" /></td>
					</tr>
				</table>

				<h:commandButton id="save" value="save album"
					action="#{albumController.save()}"
					title="If this is a new album it will be created. Otherwise it is simply updated.">
					<f:ajax execute="@form" render="@all save_msg"
						onevent="showProgress" />
				</h:commandButton>

				<h:message id="save_msg" for="save" />
			</h:form>
		</h:panelGroup>

		<script type="text/javascript">

        function showProgress(data) {
            var inputElement = data.source; // The HTML DOM input element.
            var ajaxStatus = data.status; // Can be "begin", "success" and "complete"
            var messageForInputElement = document.getElementById(inputElement.id+"_msg");

            switch (ajaxStatus) {
                case "begin": // This is called right before ajax request is been sent.
                    messageForInputElement.innerHTML = "transfering ...";
                    break;

                case "complete": // This is called right after ajax response is received.
                    messageForInputElement.innerHTML = "";
                    break;

                case "success": // This is called when ajax response is successfully processed.
                    if (messageForInputElement.innerHTML.length == 0) { // So, no message has been set.
                        messageForInputElement.innerHTML = "New Album has bean created successfully.";
                        $(messageForInputElement).css('color', 'green');
                    }
                    break;
            }
        }
        </script>


		<!-- PICTURES OF THE ALBUM -->

		<h:panelGroup id="pictureGroup">
			<h:panelGroup id="subPictureGroup"
				rendered="#{not empty albumController.id}">
				<h2>Pictures</h2>

				<h:form id="newPictureForm" enctype="multipart/form-data">
					<h:inputHidden id="id" value="#{albumController.id}" />
					
					<h:inputFile id="file" value="#{albumController.uploadedFile}" />
					<h:commandButton value="Upload" action="#{albumController.upload()}">
						<f:ajax execute="file" render="@form" />
					</h:commandButton>
					
					<h:inputTextarea id="fileContent" value="#{albumController.fileContent}" />
					
				</h:form>
			</h:panelGroup>
		</h:panelGroup>


	</ui:define>
</ui:composition>
</html>
